<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2016/4/21
  Time: 9:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/view/common/jsp_top.jsp" %>
<link rel="stylesheet" type="text/css" href="<%= basePath %>/statics/css/common/form.css">
<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1" for="txt_search_departmentname">名称</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="txt_search_departmentname">
                    </div>
                    <label class="control-label col-sm-1" for="txt_search_statu">年龄</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="txt_search_statu">
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                        <%-- <button type="button" style="margin-left:50px" id="btn_refresh" class="btn btn-primary"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>刷新</button>
                         <button type="button" style="margin-left:50px" id="btn_edit" class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button>
                         <button type="button" style="margin-left:50px" id="btn_delete" class="btn btn-primary"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button>--%>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="toolbar" class="btn-group">

            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                <a data-toggle="modal" href="demo/1" data-target="#myModal">   新增 </a>
            </button>

        <button id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
        <button id="btn_refresh" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>刷新
        </button>
    </div>
    <table id="table"></table>
    <%@include file="/WEB-INF/view/common/modal.jsp" %>
<%-- 使用标签内data-方式，但是不如js灵活
<table id="table"
       data-toggle="table"
       data-url="demo/demo/json"
       data-show-columns="true"
       data-search="true"
       data-pagination="true"
       data-height="500"
       data-click-to-select="true">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id">ID</th>
        <th data-field="name">姓名</th>
        <th data-field="age">年龄</th>
    </tr>
    </thead>
</table>--%>
    </div>
<script>
    j(function () {

        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    });

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            j('#table').bootstrapTable({
                url: 'demo/demo/json',   //请求后台的URL（*）
                method: 'get',      //请求方式（*）
                toolbar: '#toolbar',    //工具按钮用哪个容器
                striped: true,      //是否显示行间隔色
                cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,     //是否显示分页（*）
                sortable: false,      //是否启用排序
                sortOrder: "asc",     //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,      //初始化加载第一页，默认第一页
                pageSize: 2,      //每页的记录行数（*）
//                pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*）
                pageList: [1, 2, 5, 10],  //可供选择的每页的行数（*）
                search: false,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,     //是否显示所有的列
                showRefresh: false,     //是否显示刷新按钮
                minimumCountColumns: 2,    //最少允许的列数
                clickToSelect: true,    //是否启用点击选中行
                height: 500,      //行高，如果没有设置height属性，表格自动根据记录条数计算表格高度
                uniqueId: "ID",      //每一行的唯一标识，一般为主键列
                showToggle:false,     //是否显示详细视图和列表视图的切换按钮--样式有冲突
                cardView: false,     //是否显示详细视图
                detailView: false,     //是否显示父子表
                buttonsAlign:"left",
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: 'ID'
                }, {
                    field: 'name',
                    title: '名称'
                }, {
                    field: 'password',
                    title: '密码'
                }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageSize: params.limit, //页面大小
                pageNumber: params.offset //页码--其实不是页码，需要除以pageSize然后+1才是当前页码
            };
            return temp;
        };
        return oTableInit;
    };


    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件
            j("#btn_edit").click(function(){
                var row = j('#table').bootstrapTable('getSelections');
                console.log(row);
            });
           /* j("#btn_add").click(function(){
                console.log(1);
                j("#add_modal").modal({
                    show:true,
                    keyboard:false,
                    remote:"demo/demo/add"
                });
            })*/
        };
        return oInit;
    };
        /*j('#table').bootstrapTable({
        onClickRow: function (row, trElement) {
            console.log(row);
            console.log(trElement);
        }
    });*/
</script>
<%@include file="/WEB-INF/view/common/jsp_bottom.jsp" %>
